<template>
  <div>
    <template v-if="data && data.length > 0">
      <div v-for="(item, index) in data" :key="index" :style="{ display: allLeaf(item.children) ? 'flex' : 'block' }" class="line">
        <span class="title">{{ item.title }}:</span>
        <template v-if="allLeaf(item.children, item.leaf)">
          <div class="all-leaf">
            <a-checkbox :indeterminate="item.indeterminate" :checked="item.checkAll" @change="e => onCheckAllChange(e, item)" class="check-all">
              全部
            </a-checkbox>
            <a-checkbox-group v-model="item.checkList" @change="e => onCheckChange(e, item)" class="check-group">
              <a-checkbox :value="nextItem.code" v-for="(nextItem, nextIndex) in item.children" :key="nextIndex">{{ nextItem.title }}</a-checkbox>
            </a-checkbox-group>
          </div>
        </template>
        <template v-else>
          <div class="next-tree">
            <query-tree :treeData="item.children" @update="update"></query-tree>
          </div>
        </template>
      </div>
    </template>
    <div v-else style="text-align:center;line-height:100px;">
      暂无标签
    </div>
  </div>
</template>
<script>
export default {
  name: 'queryTree',
  props: {
    treeData: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      data: []
    }
  },
  computed: {
    allLeaf: () => {
      return (list, leaf) => {
        // console.log(list)
        if (!leaf && list != null) {
          let result = list.filter(item => item.leaf)
          if (result.length == list.length) {
            return true
          } else {
            return false
          }
        } else {
          return true
        }
      }
    }
  },
  watch: {
    treeData: {
      handler(newValue) {
        this.data = JSON.parse(JSON.stringify(newValue))
      },
      deep: true
    }
  },
  mounted() {
    this.data = JSON.parse(JSON.stringify(this.treeData))
  },
  methods: {
    onCheckAllChange(e, item) {
      console.log(e.target.checked, item)
      item.checkValue = e.target.checked ? item.children : []
      item.checkList = e.target.checked ? item.children.map(e => e.code) : []
      item.indeterminate = false
      item.checkAll = e.target.checked
      let obj = {
        codes: e.target.checked ? item.children : [],
        code: item.code
      }
      // console.log(obj)
      this.$emit('update', obj)
    },
    onCheckChange(value, item) {
      console.log(value, item)
      item.checkList = value
      item.checkValue = []
      for (let i of item.children) {
        if (value.includes(i.code)) {
          item.checkValue.push(i)
        }
      }
      console.log(item.checkValue)
      item.indeterminate = !!item.checkValue.length && item.checkValue.length < item.children.length
      item.checkAll = item.checkValue.length == item.children.length
      let obj = {
        codes: item.checkValue,
        code: item.code
      }
      // console.log(obj)
      this.$emit('update', obj)
    },
    update(obj) {
      this.$emit('update', obj)
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  font-size: 14px;
  color: #333;
  line-height: 24px;
  white-space: nowrap;
  margin-right: 12px;
}
.all-leaf {
  display: block;
  position: relative;
  line-height: 24px;
  .tag {
    margin: 0;
  }
  /deep/ .ant-checkbox-wrapper {
    margin-bottom: 16px;
    .ant-checkbox {
      display: none;
    }
  }
  /deep/.ant-checkbox-wrapper-checked {
    background: #1890ff;
    color: white;
    border-radius: 2px;
  }
  .check-all {
    position: absolute;
  }
  .check-group {
    .ant-checkbox-wrapper {
      line-height: 24px;
      margin-right: 24px;
      margin-left: 0;
    }
    .ant-checkbox-wrapper:first-child {
      margin-left: 60px;
    }
  }
}
.line {
  margin-bottom: 6px;
}
.next-tree {
  margin-left: 24px;
}
</style>
